@import './variables.scss';

// 科技感主题 - 浅蓝色+霓虹点缀

// 卡片通用样式
.tech-card {
  border-radius: $radiusLarge;
  margin-bottom: 20px;
  box-shadow: $shadowCard;
  border: none;
  background-color: #ffffff;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 6px 16px rgba($primaryBlue, 0.15);
  }
  
  .card-header {
    display: flex;
    align-items: center;
    font-size: 16px;
    
    .neon-icon {
      color: $neonAccent;
      margin-right: 10px;
      font-size: 20px;
      text-shadow: 0 0 8px rgba($neonAccent, 0.3);
    }
    
    span {
      font-weight: 600;
      color: $darkText;
    }
  }
  
  .el-card__header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba($primaryBlue, 0.1);
  }
  
  .el-card__body {
    padding: 20px;
  }
}

// 霓虹风格图标
.neon-icon {
  color: $neonAccent;
  text-shadow: 0 0 8px rgba($neonAccent, 0.3);
}

// 状态标签样式
.tech-tag {
  border-radius: 4px;
  padding: 4px 8px;
  
  &--success {
    background: rgba($success, 0.1);
    color: $success;
    border: 1px solid rgba($success, 0.2);
  }
  
  &--warning {
    background: rgba($warning, 0.1);
    color: $warning;
    border: 1px solid rgba($warning, 0.2);
  }
  
  &--danger {
    background: rgba($danger, 0.1);
    color: $danger;
    border: 1px solid rgba($danger, 0.2);
  }
  
  &--info {
    background: rgba($primaryBlue, 0.1);
    color: $primaryBlue;
    border: 1px solid rgba($primaryBlue, 0.2);
  }
}

// 表格增强样式
.tech-table {
  .el-table__header-wrapper {
    th {
      background-color: rgba($bgLight, 0.6);
      color: $darkText;
      font-weight: 600;
    }
  }
  
  .el-table__row {
    transition: all 0.2s ease;
    
    &:hover {
      background-color: rgba($primaryBlue, 0.05);
    }
  }
  
  // 表格内的按钮组
  .table-actions {
    display: flex;
    gap: 8px;
  }
}

// 按钮样式增强
.tech-button {
  &--primary {
    background: linear-gradient(135deg, $primaryBlue, darken($primaryBlue, 10%));
    border: none;
    box-shadow: 0 2px 6px rgba($primaryBlue, 0.3);
    
    &:hover, &:focus {
      background: linear-gradient(135deg, lighten($primaryBlue, 5%), $primaryBlue);
      box-shadow: 0 4px 8px rgba($primaryBlue, 0.4);
    }
  }
  
  &--neon {
    background: linear-gradient(135deg, $neonAccent, darken($neonAccent, 10%));
    border: none;
    box-shadow: 0 2px 6px rgba($neonAccent, 0.3);
    color: $darkText;
    
    &:hover, &:focus {
      background: linear-gradient(135deg, lighten($neonAccent, 5%), $neonAccent);
      box-shadow: 0 4px 8px rgba($neonAccent, 0.4);
    }
  }
}

// 表单样式优化
.tech-form {
  .el-form-item__label {
    color: $darkText;
    font-weight: 500;
  }
  
  .el-input__inner {
    border-radius: $radiusSmall;
    border: 1px solid rgba($primaryBlue, 0.2);
    
    &:focus {
      border-color: $primaryBlue;
      box-shadow: 0 0 0 2px rgba($primaryBlue, 0.1);
    }
  }
}

// 分页组件优化
.tech-pagination {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    &.active {
      background-color: $primaryBlue;
    }
    
    &:hover {
      color: $primaryBlue;
    }
  }
}

// 背景层
.tech-bg {
  background-color: $bgLight;
  min-height: calc(100vh - 60px);
  padding: 20px;
}

// 卡片内容区域
.tech-content {
  border-radius: $radiusLarge;
  background-color: #ffffff;
  padding: 20px;
  box-shadow: $shadowCard;
}

// 栅格间距优化
.tech-row {
  margin-bottom: 20px;
  
  .tech-col {
    transition: transform 0.3s;
    padding: 10px;
    
    &:hover {
      transform: translateY(-5px);
    }
  }
}

// 弹窗优化
.tech-dialog {
  .el-dialog__header {
    border-bottom: 1px solid rgba($primaryBlue, 0.1);
    padding: 15px 20px;
    
    .el-dialog__title {
      color: $darkText;
      font-weight: 600;
      font-size: 18px;
    }
  }
  
  .el-dialog__body {
    padding: 20px;
  }
  
  .el-dialog__footer {
    border-top: 1px solid rgba($primaryBlue, 0.1);
    padding: 15px 20px;
  }
}

// 动画效果
.tech-fade-in {
  animation: techFadeIn 0.3s ease;
}

@keyframes techFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
} 